<script lang="ts">
export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<!-- eslint-disable import/first -->
<script setup lang="ts">
import type { ClassApi } from '@/apis'
import getAvatar from '@/utils/avatar'

defineProps<{
  data: ClassApi.ClassStudentResp
}>()

const gotoStudentDetail = (item) => {
  uni.navigateTo({
    url: `/pages/class/student?id=${item.id}`,
  })
}

const onCopy = (text) => {
  uni.setClipboardData({
    data: text,
    success: (success) => {
      uni.showToast({ title: '复制成功' })
    },
  })
}
</script>

<template>
  <view class="flex items-center gap-[16rpx] border-rd-[16rpx] bg-white p-[24rpx]" @click="gotoStudentDetail(data)">
    <wd-img width="88rpx" radius="8rpx" height="88rpx" :src="getAvatar(data.avatar, data.gender)" />
    <view class="flex flex-1 items-center justify-between">
      <view class="flex-1">
        <view class="flex items-center">
          <text class="font-size-[30rpx]">
            {{ data.name }}
          </text>
          <wd-icon v-if="data.gender === 2" name="gender-female" size="30rpx" color="#FF0088" />
          <wd-icon v-else name="gender-male" size="30rpx" color="#3c74df" />
        </view>
        <view class="mt-[10rpx] flex items-center gap-[8rpx]">
          <view class="border-rd-[4rpx] bg-[#E8F3FF] px-[8rpx] py-4rpx font-size-[24rpx] color-[#2176E7]" @click.stop="onCopy(data.parentPhone)">
            {{ data.parentPhone }}
          </view>
        </view>
      </view>
      <slot name="extra" />
    </view>
  </view>
</template>

<style scoped>

</style>
